<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: black;
        }
        
        .ball {
            position: absolute;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <script>
        // 小球类
        function Ball(x, y) {
            // 属性x,y表示的是圆心的坐标
            this.x = x;
            this.y = y;
            // 小球的背景色
            this.color = colorArr[parseInt(Math.random() * 6)]
            this.r = 10
                // 透明度
            this.opacity = 1
                // 增量使用do while 可防止dX,dY都是零
            do {
                this.dX = parseInt(Math.random() * 20) - 10;
                this.dY = parseInt(Math.random() * 20) - 10;
            } while (this.dX == 0 && this.dY == 0)
            this.init()
            ballArr.push(this)
        }
        Ball.prototype.init = function() {
                this.dom = document.createElement('div');
                this.dom.className = 'ball';
                this.dom.style.width = this.r * 2 + 'px'
                this.dom.style.height = this.r * 2 + 'px'
                this.dom.style.left = this.x - this.r + 'px';
                this.dom.style.top = this.y - this.r + 'px';
                this.dom.style.backgroundColor = this.color;
                // 上树
                document.body.appendChild(this.dom);
            }
            // 更新
        Ball.prototype.update = function() {
                this.x += this.dX;
                this.y -= this.dY;
                this.r += 0.2;
                this.opacity -= 0.01;
                this.dom.style.width = this.r * 2 + 'px'
                this.dom.style.height = this.r * 2 + 'px'
                this.dom.style.left = this.x - this.r + 'px';
                this.dom.style.top = this.y - this.r + 'px';
                this.dom.style.opacity = this.opacity
                    // 当透明度小于零，从数组中删除自己
                if (this.opacity < 0) {
                    // 从数组中删除自己
                    for (var i = 0; i < ballArr.length; i++) {
                        if (ballArr[i] == this) {
                            ballArr.splice(i, 1);
                        }
                    }
                    // 还要删除自己的dom
                    document.body.removeChild(this.dom);
                }
            }
            // 把所有的小球实例放到数组中
        var ballArr = [];
        var colorArr = ['#66CCCC', '#CCFF66', '#FF99CC', 'FF6666', '#CC3399', '#FF6600']
        new Ball(200, 210);

        // 定时器,负责更新所有的小球实例
        setInterval(function() {
                // 遍历数组，调用update方法
                for (var i = 0; i < ballArr.length; i++) {
                    ballArr[i].update();
                }
            }, 20)
            // 鼠标指针的监听
        document.onmousemove = function(e) {
            // 得到鼠标的位置
            var x = e.clientX;
            var y = e.clientY;
            new Ball(x, y)
        }
    </script>
</body>

</html>